<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/frame.css">
    <style type="text/css">

        /* tooltip */
        #tooltip {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }
        .layui-form-pane .layui-form-label {
            background-color:#e2e2e2;
            color:#666;
        }
    </style>
<body>


<table class="layui-hide" id="test"></table>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="status" disabled="" value="{{d.status}}" lay-skin="switch" lay-text="运行|停止"
           lay-filter="status" {{ d.status== 'on' ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo" {{ d.id== 10006
           ? 'checked' : '' }}>
</script>


<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">查询条件</li>
        <li>查询列表</li>

    </ul>
    <div class="layui-tab-content" style="">
        <div class="layui-tab-item layui-show layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">traceId</label>
                <div class="layui-input-inline">
                    <input type="text" name="traceId" autocomplete="off" placeholder="系统交易id"
                           class="layui-input">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">bizId</label>
                <div class="layui-input-inline">
                    <input type="text" name="bizId" autocomplete="off" placeholder="业务id"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输入内容</label>
                <div class="layui-input-inline" style="width:480px">
                    <input type="text" name="req" autocomplete="off" placeholder="报文内容（模糊查询）"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输出内容</label>
                <div class="layui-input-inline" style="width:480px">
                    <input type="text" name="resp" autocomplete="off" placeholder="报文内容（模糊查询）"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">调用日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="time" id="date" lay-verify="date" placeholder="时间（天）"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin:12px 240px;text-align:left;">
                <button class="layui-btn layui-btn-sm" id="query-log" lay-submit="" lay-filter="query-log">查询日志</button>
            </div>

        </div>
        <script type="text/html" id="tableBar">
            <a class="layui-btn layui-btn-xs oka-btn-radius" lay-event="detail">详细</a>
        </script>
        <script type="text/html" id="machineTpl">
            <a href="javascript:;" data-id="{{ d.machineId }}" class="layui-table-link" name="machine-btn"
               target="_blank">{{ d.machineInfo }}</a>
        </script>
        <script type="text/html" id="stateTpl">
            {{#  if(d.state == 0){ }}
            <span style="color: #ccc;">关机</span>
            {{#  } else if(d.state == 1) { }}
            <span style="color:#00a65a;">运行</span>
            {{#  } else if(d.state == 2) { }}
            <span style="color:#FFB800;">暂停</span>
            {{#  } }}
        </script>

        <div class="layui-tab-item">
            <div class="layui-form layui-form-pane" id="ability-form">
                <div class="layui-form-item layui-form-text" style="margin-bottom: 0">
                    <div class="layui-input-block">
                        <table class="layui-table" lay-data="{even:true, height:260, page:false, id:'records'}"
                               lay-filter="records">
                            <thead>
                            <tr>
                                <th lay-data="{type:'numbers'}"></th>
                                <th lay-data="{field:'traceid'}">系统交易id</th>
                                <th lay-data="{field:'begintime', width:200}">开始时间</th>
                                <th lay-data="{field:'costtime', width:100}">执行时长</th>
                                <th lay-data="{field:'state', width:80}">状态</th>
                                <!-- 运行 挂起  关闭-->
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'table', 'laydate', 'oka'], function () {
        var laydate = layui.laydate, form = layui.form, table = layui.table;
        laydate.render({
            elem: '#date'
        });

        form.on('submit(query-log)', function (data) {
            oka.loading.open();
            $.ajax({
                url: "/log/query"
                , type: "POST"
                , contentType: "application/json"
                , async: true
                , dataType: "json"
                , data: JSON.stringify(data.field)
                , success: function (res) {
                    oka.loading.close();
                    if (res != "") {
                        console.log(res);
                        //var d = table.cache.records.slice();
                        //d = res;

                        table.reload("records", {
                            data: res
                        })
                    }


                }
            });

            return false;
        });
    });
</script>


</body>
</html>